// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).

// @import 'sencha-touch/bb10';
// @import 'sencha-touch/bb10/all';

$base-color: #FFFFFF;
$active-color: #FFFFFF;
$bg-color: #AB895F;
$vi-color: #730017;
$input-color: #B30C4D;

$neutral-color: #FFFFFF;
$page-bg-color : #FFFFFF;


$base-gradient: 'null';

$loading-spinner-color: #FFFFFF;

// @import 'sencha-touch/base';
// @import 'sencha-touch/base/all';

@import 'sencha-touch/my';
// @import 'sencha-touch/my/all';

@import 'sencha-touch/my/src/Class';
@import 'sencha-touch/my/src/Button';
@import 'sencha-touch/my/src/MessageBox';
@import 'sencha-touch/my/src/Panel';
// @import 'sencha-touch/my/src/Sheet';
@import 'sencha-touch/my/src/Toolbar';
@import 'sencha-touch/my/src/carousel/Carousel';
@import 'sencha-touch/my/src/dataview/List';
@import 'sencha-touch/my/src/form/Panel';
@import 'sencha-touch/my/src/form/FieldSet';
@import 'sencha-touch/my/src/field/Field';
@import 'sencha-touch/my/src/field/Checkbox';
@import 'sencha-touch/my/src/field/Radio';
@import 'sencha-touch/my/src/field/Spinner';
@import 'sencha-touch/my/src/picker/Picker';
@import 'sencha-touch/my/src/slider/Slider';
@import 'sencha-touch/my/src/tab/Panel';


// @import 'sencha-touch/my/src/plugin/PullRefresh';

// Custom code goes here..

// Examples of using the icon mixin:
// @include icon('user');

// Your custom code goes here...
@include icon('cart');

body .x-desktop {
  background:transparent;
}

.x-layout-card-item{
  background:transparent;
}


.x-tabbar-dark.x-docked-bottom .x-tab {
  height: 100%;
  min-width: 20%;
}

.x-container1 .x-tabbar-dark {
     background:none;
     margin: 0 0 0 3px;

    .x-tab {
      height: 44px;
      min-width: 24%;
      margin:0 1px;
      background: transparent url("../images/category_back.png") repeat-x;
      background-size:100% 80%;
      color: #000;

      .x-button-label{
        margin: 0;
        padding: 10px 0 0 0;
        font-size: 16px;
         color: #270009;
       }
    }

  .x-tab .x-button-icon {
    width: 0;
    height: 0;
  }

  .x-tab-active{
    background: transparent url("../images/category_back_click.png") repeat-x;
    background-size:100% 100%;
  }

  .x-tab-active .x-button-label{
    margin: 0;
    padding: 13px 0 0 0;
    font-size: 16px;
    color: #fff;
  }
} 



.x-container .x-form-label{
  color:#270009;
  font-size: 14px;
  line-height: 40px;
}
.x-container2{
  padding-left: 10px;
}
.x-container2 .x-form-label{
  color:#5f5f5f;
  font-size: 12px;
  line-height: 30px;
  padding-top: 3px;
}

.x-container3 .x-form-label{
  padding-top: 15px;
  font-size: 18px;
  line-height: 30px;
  //color: #270009;
  color: #426930;
}

.x-container3 .x-container3-button{
  float: left;
    margin: 10px 5px;
    padding: 0;
    width: 30px !important;
    height: 30px;
    border: 2px solid #fff!important;
    font-size: 1.3em;
    text-align: center;
    color: #fff;
}

.x-container3 .x-field-input{
  float: left;
  width: 50%;
  line-height: 30px;

  .x-input-el {
    width: 100%;
    text-align: center;
    padding: 8px 10px;
  }
}
.x-container4 .x-form-label{
  padding-top: 11px;
  color: #270009;
  font-size: 18px;
  line-height: 30px;
}

.x-container5{

  .x-field-text {
    background: #fff;
    border:1px solid #ccc;
    -webkit-box-shadow: 0px 1px 2px #ccc;
    box-shadow: 0px 1px 2px #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 5px;
  }
  .x-field-select {
    background: #fff;
    border:1px solid #ccc;
    -webkit-box-shadow: 0px 1px 2px #ccc;
    box-shadow: 0px 1px 2px #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 5px;
  }

  .x-field-textarea {
    background: #fff;
    border:1px solid #ccc;
    -webkit-box-shadow: 0px 1px 2px #ccc;
    box-shadow: 0px 1px 2px #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 5px;
  }

  .x-form-label{
    padding-top: 11px;
  }
  .x-component-outer{
    float: left;
    width: 70%;
  }
  .x-stretched.x-container{
    -webkit-box-orient: horizontal;
  }
  .x-input-text{
    border: none;
    border-radius:0px;
    -webkit-border-radius:0px;
    -webkit-box-shadow:none;
    box-shadow:none;
  }
}

.x-area{
	margin: 0;
	padding: 0;
	margin-top: 10px;
	padding-top: 10px;
	background: transparent url('../images/zhixian.png') repeat-x;
    background-size: 100% 2px;
    height:auto;
}

.x-area>div{
	background-color: $base-color;
	background-image: none;
	margin: 6px;
	@include border-radius(8px);
    -webkit-border-radius:8px;
    @include box-shadow(1px 1px 2px #CCC5B9);
     -webkit-box-shadow:1px 1px 2px #CCC5B9;
    padding: 10px;
    width: auto;
}

.x-area1{
  margin: 3px 1px;
  padding: 0;
  .x-stretched.x-container{
    -webkit-box-orient: horizontal;
  }
  .x-form-label{
    padding-left: 10px;
  }
}

.x-area1>div{
  background-color: $base-color;
  background-image: none;
  margin: 5px;
  @include border-radius(4px);
  -webkit-border-radius:4px;
  @include box-shadow(1px 1px 2px #CCC5B9);
  -webkit-box-shadow:1px 1px 2px #CCC5B9;
  padding: 5px;
  padding-bottom: 10px;
  width: auto;
}
.x-area2{
  margin: 0;
  padding: 0;
}

.x-area2>div{
  background-color: $base-color;
  background-image: none;
  margin: 5px;
  @include border-radius(4px);
  -webkit-border-radius:4px;
  @include box-shadow(1px 1px 2px #CCC5B9);
  -webkit-box-shadow:1px 1px 2px #CCC5B9;
  padding: 5px;
  padding-bottom: 10px;
  width: auto;
}

.x-filter {

}

.x-innerhtml {
  height: 100%;
}

.x-button2{
	//@include background(linear-gradient(color-stops(#F6D09E, #F6CE98)));
}

.x-button4{
  @include background(linear-gradient(color-stops(#ED8C70, #F27E5F)));
}

.x-button6{
  @include background(linear-gradient(color-stops(#ED8C70, #990033)));
}

.x-button3{
  background: #cccccc;
}
.x-button5{
  border: none;
  box-shadow: none;
}
.readOnly{
	input{
		padding: 8px 1px;
		border: 0;
		box-shadow: 0 0 0 #fff;
		color: $vi-color;
		font-size: 20px;
	}
}

.x-panel {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

.font1{
  font-size: 14px;
}
.font2{
  font-size: 16px;
}
.font3{
  font-size: 12px;
}
.font4{
  font-size: 10px;
}
.font5{
  font-size: 18px;
}
.font6{
  font-size: 20px;
}
.color1{
  color:#9a825b;
}
.color2{
  //color:#270009;
  color: #426930;
}
.color3{
  color:#5f5f5f;
}
.color4{
  color:#fdff40;
}
.color5{
  color:#6f0019;
}
.color6{
  color:#ffffff;
}
.color7{
  color: red;
}

.color8{
  color: #E3613F;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.blod{
  font-weight: bold;
}
.fenge{
  background:url(../images/zhixian.png) repeat-x;
  background-size: 100% 100%;
  height:2px;
  margin: 5px 0;
}
.height30{
  height: 30px;
  line-height: 30px;
}
.height20{
  height: 20px;
  line-height: 20px;
}
.height40{
  height: 40px;
  line-height: 40px;
}
.height50{
  height: 50px;
  line-height: 50px;
}
.radius{
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.radius2{
  border-radius: 8px;
  -webkit-border-radius: 8px;
}

.radius3{
  border-radius: 2px;
  -webkit-border-radius: 2px;
}

.shadow{
  border:1px solid #ccc;
  -webkit-box-shadow: 0px 1px 2px #ccc;
  box-shadow: 0px 1px 2px #ccc;
}

.shadow_not{
  border:1px solid #ccc; 
}
.homelist_name{
  padding-left: 10px;
  overflow: hidden;
}

.img97{
  width: 97px;
  margin-top: 5px;
}

.hidden{
  overflow: hidden;
}
.category{
  text-align:center;
  width:30%;
  margin:5px;
  padding:5px;
  float:left;
  height: 120px;
  background: #fff;
}
.buy_icon2{
  position: absolute;
  top:-6px;
  right: 2px;
}
.rotate{
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: left bottom;
}
.shoppingEdit_bg{
  background: #ffffff;
  margin: 5px 5px;
  padding:5px 10px;
  position: relative;
}
.shopping_numBg{
  background: url(../images/shopping_numBg.png);
}
.more_form{
  height:40px;
  line-height: 40px;
  margin: 10px;
  padding: 10px;
}
.more_border{
  border: none;
  border-bottom: 1px dashed #ccc;
}
.noheart{
  background: url(../images/noheart.png);
  background-size: 100% 100%;
}
.heart{
  background: url(../images/heart.png);
  background-size: 100% 100%;
}
.paddinglfet10{
  padding-left: 20px;
}
.paddingtop5{
  padding-top: 5px;
}

